<template>
    <div class="header flex align-items-center justify-content-space-between">
        <div class="system-title flex align-items-center">
            <img :src="logo" alt="logo"/>在线象棋对战
        </div>
        <div class="user flex align-items-center justify-content-flex-end">
            <el-icon :size="16" color="#fff" @click="logout">
                <SwitchButton/>
            </el-icon>
            <el-icon :size="16" color="#fff" @click="handleRedirect">
                <Tools/>
            </el-icon>
        </div>
    </div>
</template>

<script setup>
    import logo from '@/assets/logo.png';
    import {SwitchButton, Tools} from '@element-plus/icons-vue';
    import {ElMessageBox} from 'element-plus';
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router';

    const store = useStore();
    const router = useRouter();

    //退出登录
    const logout = () => {
        ElMessageBox.confirm(
            '您确定退出登录？如果正在比赛则视为认输',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(async () => {
            await store.dispatch('handleSetIsFresh', true);
            await store.dispatch('handleSetIsLogin', false);
            await router.push('/login');
        });
    };
    //跳转用户信息页
    const handleRedirect = async () => {
        await router.push('/index/userinfo');
    }
</script>

<style scoped lang="less">
    .header {
        background: rgba(184, 181, 174, 0.7);
        height: 40px;
        padding: 0 15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 3px solid rgba(155, 141, 128, 0.6);

        .system-title {
            font-size: 12px;
            color: #fff;
            font-weight: bold;
            background: rgba(155, 141, 128, 0.8);
            height: 30px;
            line-height: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            padding: 0 30px 0 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            img {
                width: 20px;
                margin-right: 5px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }
        }

        .user {
            background: rgba(155, 141, 128, 0.6);
            height: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            width: 400px;
            padding: 0 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            i {
                outline: none;
                cursor: pointer;
                margin-left: 20px;

                &:hover {
                    border: none;
                    outline: none;
                }
            }
        }
    }
</style>